<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5基础</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/html.css">
</head>
<body>
<div class="container">
    <div class="catalogue">
        <div><a href="#h5_bj">H5布局</a></div>
        <div><a href="#h5_bq">H5标签</a></div>
        <div><a href="#h5_video">H5音频/视频/meter 标签</a></div>
        <div><a href="#h5_videoJS">videoJS</a></div>
        <div><a href="#h5_media">多媒体标签</a></div>
        <div><a href="#h5_input">h5新增input类型</a></div>
        <div><a href="#h5_from">h5表单新增属性</a></div>
        <div><a href="#h5_other">h5其他标签属性新增属性</a></div>


    </div>
    <div class="substance">
        <div class="one">
            <h1 id="h5_bj">H5布局 | <a target="_blank" href="../demo/7-h5布局demo.html">H5布局demo</a></h1>
            <img alt="html5布局" src="../image/h5.png" width="60%">
            <pre>
HTML 5 ≈ HTML + CSS3 + Javascript + API

新布局的意义
    语义化: HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签
        1. 这种语义化的特性提升了网页的质量和语义
        2. 减少了以前用于CSS 调用的class 和 id 属性
    对搜索引擎的友好: 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

常用的 DOCTYPE 声明
    HTML 4.01 Strict:   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
    HTML 4.01 Transitional: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
    HTML 4.01 Frameset: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;
    HTML 5: &lt;!DOCTYPE html&gt;

文档类型定义（DTD）
    DTD:    DTD可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。
    在HTML中: DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
    HTML 5: HTML5 不基于 SGML，所以不需要引用 DTD。
            </pre>
        </div>
        <div class="one">
            <h1 id="h5_bq">H5标签</h1>
            <h2>H5标签
                | <a target="_blank" href="http://www.w3school.com.cn/tags/html_ref_byfunc.asp">w3school H5标签</a>
            </h2>
            <pre>
a      | abbr | address  | area    | base  | bdo      | cite  | html|  | button   | body | head    | var  | legend   | strong
code   | col  | colgroup | del     | dfn   | div      | dl    | em     | fieldset | hr   | form    | h1~6 | select   | figcaption
iframe | img  | input    | ins     | kbd   | label    | html  | li     | link     | map  | menu    | meta | noscript | blockquote
object | ol   | optgroup | option  | p     | param    | pre   | q      | s        | samp | script  | wbr  | small    | span
sub    | sup  | table    | tbody    | td   | textarea | tfoot | th     | thead    | hr   | caption | ul   | title    | style

新增的标签:
    1)article:定义独立的内容;定义一篇文章
    2)aside:定义其所处内容之外的内容;定义页面内容部分的侧边栏
    3)audio:定义声音,比如音乐或其他音频流
    4)bdi:定义文本的文本方向,使其脱离其周围文本的方向设置
    5)canvas:定义图形,比如图表和其他图像
            &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
            &lt;script type="text/javascript"&gt;
                var canvas=document.getElementById('myCanvas');
                var ctx=canvas.getContext('2d');
                ctx.fillStyle='#FF0000';
                ctx.fillRect(0,0,80,100);
            &lt;/script&gt;
    6)command:定义命令按钮,比如单选按钮、复选框或按钮
            &lt;menu&gt; &lt;command onclick="alert('Hello World')"&gt;Click Me!&lt;/command&gt; &lt;/menu&gt;
    7)datalist:定义选项列表.请与 input 元素配合使用该元素,来定义 input可能的值
            &lt;input id="myCar" list="cars" /&gt;
            &lt;datalist id="cars"&gt;
                &lt;option value="BMW"&gt;
                &lt;option value="Ford"&gt;
                &lt;option value="Volvo"&gt;
            &lt;/datalist&gt;
    8)details:用于描述文档或文档某个部分的细节
            &lt;details&gt;
                &lt;summary&gt;Copyright 2011.&lt;/summary&gt;
                &lt;p&gt;All pages and graphics on this web site are the property of W3School.&lt;/p&gt;
            &lt;/details&gt;
    9)embed:定义嵌入的内容,比如插件  &lt;embed src="helloworld.swf" /&gt;
    10)figcaption:定义 figure 元素的标题(caption);
            &lt;figure&gt;
                &lt;figcaption&gt;黄浦江上的的卢浦大桥&lt;/figcaption&gt;
                &lt;img src="shanghai_lupu_bridge.jpg" width="350" height="234" /&gt;
            &lt;/figure&gt;
    11)figure:规定独立的流内容（图像、图表、照片、代码等等）;定义一组媒体内容及标题
            &lt;figure&gt;
                &lt;p&gt;黄浦江上的的卢浦大桥&lt;/p&gt;
                &lt;img src="shanghai_lupu_bridge.jpg" width="350" height="234" /&gt;
            &lt;/figure&gt;
    12)footer:定义 section 或 document 的页脚   &lt;footer&gt;This document was written in 2010&lt;/footer&gt;
    13)header:定义文档的页眉（介绍信息）;定义一个页面或区域的头部
    14)hgroup:用于对网页或区段（section）的标题进行组合;定义文件中一个区块的相关信息
            &lt;hgroup&gt;
                &lt;h1&gt;Welcome to my WWF&lt;/h1&gt;
                &lt;h2&gt;For a living planet&lt;/h2&gt;
            &lt;/hgroup&gt;
            &lt;p&gt;The rest of the content...&lt;/p&gt;
    15)mark:定义带有记号的文本;请在需要突出显示文本时使用 m 标签.定义有标记的文本(黄色选中状态)
            &lt;p&gt;Do not forget to buy &lt;mark&gt;milk&lt;/mark&gt; today.&lt;/p&gt;
    16)meter:定义度量衡。仅用于已知最大和最小值的度量;状态标签(实时状态显示:气压、气温)
            &lt;meter min="0" max="20"&gt;5&lt;/meter&gt;
            &lt;meter&gt;2 out of 10&lt;/meter&gt;
            &lt;meter&gt;30%&lt;/meter&gt;
    17)nav:定义导航链接的部分
    18)output:定义不同类型的输出，比如脚本的输出;定义一些输出类型,计算表单结果配合oninput事件
            &lt;form action="form_action.asp" method="get" name="sumform"&gt;
                &lt;output name="sum"&gt;&lt;/output&gt;
            &lt;/form&gt;
    19)progress:定义运行中的进度（进程）;状态标签(任务过程:安装、加载)
            对象的下载进度：
            &lt;progress&gt;
                &lt;span id="objprogress"&gt;85&lt;/span&gt;%
            &lt;/progress&gt;
    20)rp: 告诉那些不支持ruby元素的浏览器如何去显示
            &lt;ruby&gt;
                漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ㄏㄢˋ&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
            &lt;/ruby&gt;
    21)rt: 定义对ruby的注释内容文本
    22)ruby: 定义注释或音标
    23)section:定义文档中的节(section、区段).比如章节、页眉、页脚或文档中的其他部分;定义一个区域
            &lt;section&gt;
                &lt;h1&gt;PRC&lt;/h1&gt;
                &lt;p&gt;The People's Republic of China was born in 1949...&lt;/p&gt;
            &lt;/section&gt;
    24)source:为媒介元素（比如video 和 audio）定义媒介资源。
    25)summary:包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息
            &lt;details&gt;
                &lt;summary&gt;HTML 5&lt;/summary&gt;
            This document teaches you everything you have to learn about HTML 5.
            &lt;/details&gt;
    26)time: 定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的
            &lt;p&gt;我们在每天早上 &lt;time&gt;9:00&lt;/time&gt; 开始营业。&lt;/p&gt;
            &lt;p&gt;我在 &lt;time datetime="2008-02-14"&gt;情人节&lt;/time&gt; 有个约会。&lt;/p&gt;
    27)track:为诸如 video 元素之类的媒介规定外部文本轨道
            &lt;video width="320" height="240" controls="controls"&gt;
                &lt;source src="forrest_gump.mp4" type="video/mp4" /&gt;
                &lt;source src="forrest_gump.ogg" type="video/ogg" /&gt;
                &lt;track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"&gt;
                &lt;track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"&gt;
            &lt;/video&gt;
    28)video:定义视频，比如电影片段或其他视频流
            &lt;video src="movie.ogg" controls="controls"&gt;
            您的浏览器不支持 video 标签。
            &lt;/video&gt;
    29)keygen:规定用于表单的密钥对生成器字段.它是HTML中的新元素,但在H5中新增了属性:autofocus challenge disabled form keytype name
        定义表单里一个生成的键值(加密信息传送)
    30)dialog: 定义一个对话框(会话框)类似微信
    31)menu:命令列表（目前所有主流浏览器都不支持）
            menuitem: menu命令列表标签（只有FireFox8.0+支持）
            command:  menu标记定义一个命令按钮(只有IE9支持)

重定义标签: 显示不变，只是表达的含义进行了重新定义的标签
    b: 代表内联文本，通常是粗体，没有传递表示重要的意思
    i: 代表内联文本，通常是斜体，没有传递表示重要的意思
    dd: 可以同details与figure一同使用，定义包含文本，dialog也可用
    dt: 可以同details与figure一同使用，汇总细节，dialog也可用
    hr: 表示主题结束，而不是水平线，虽然显示相同
    small: 表示小字体，例如打印注释或者法律条款
    strong: 表示重要性而不是强调符号
                </pre>
        </div>
        <div class="one">
            <h1 id="h5_video">H5音频/视频/meter 标签</h1>
            <h2>video视频标签</h2>
            <pre>
支持的三种常见格式: mp4、webm、ogv (safari浏览器仅支持 mp4)
ie8以下,不支持video标签;ie9支持video标签;但是只支持mp4格式;
video 可以包含 source 标签; video的src级别高于source; 例如:
        &lt;video controls&gt;
            &lt;source src='视频url'&gt;   //如果不匹配,则往下寻找下一个 source 标签
            &lt;source src='视频url'&gt;
            您的浏览器不支持，请升级您的浏览器
        &lt;/video&gt;

属性:
src:视频链接    controls:视频控制器      width:播放器的宽度    height:播放器的高度
autoplay:自动播放 (chrome不会自动播放)   loop:循环播放        poster: 播放之前显示的图片  muted 视频静音

API:
play(): 播放视频(chrome不允许自动带声音播放,允许禁音播放)   pause():暂停
duration: 返回视频的总长度 （以秒的形式）      currentTime: 设置或返回当前的视频长度 （以秒的形式）
src:设置视频的来源             volume: 设置声音(0~1)
controls: 设置video上面的控件
muted: 设置video上面的 muted 属性（静音）但是 这个属性不会出现在 video 标签上
networkState: video上面视频网络状态
        0 未初始化
        1 视频已经选取好资源，但是未使用网络
        2 浏览器正在下载视频资源
        3 未找到视频资源 （在一开始的情况下 因为 video 不会立即找到资源 所以也会出现 3 这个状态码）
currentSrc:返回视频的地址（必须是在视频 可以加载播放的时候 ，而且不能赋值）
addEventListener('ended',function(){ }) //监听视频播放结束事件;播放结束触发函数
playbackRate:设置视频的播放速度（默认是 1）
readyState:返回当前视频的就绪状态
        0 <-> 没有关于视频就绪的信息
        1 <-> 有数据 但是快不足以支撑了
        2 <-> 当前的数据是可以用 但是没有数据来播放下一帧/毫秒了
        3 <-> 数据正在缓冲 当前及至少下一帧是可用了
        4 <-> 可用数据足已开始播放
addEventListener('timeupdate',function(){}) //监视频目前的播放状态;如果播放,触发函数 场景:当前时长/总时长
onseeked: 当用户拖动进度条完成时触发的事件      onseeking:当用户开始拖动进度条时触发的事件      onvolumechange:当视频的声音发生改变时触发的事件
RequestFullScreen:全屏 但是必须需要在用户的事件中调用;有浏览器兼容问题
        示例: xx.onclick = function(){ //VideoNode是video标签对应的节点
                if(VideoNode.webkitRequestFullscreen)    VideoNode.webkitRequestFullscreen();
                else if(VideoNode.mozRequestFullScreen)	 VideoNode.mozRequestFullScreen();
		     };
load: 强制让播放器刷新一下/从新加载一次
addEventListener('canplay',function(){}) //视频已经加载好,可以开始播放时触发的事件
                        </pre>
            <h2>audio:音频</h2>
            <pre>
支持的音频格式：mp3、ogg、wav     (safari 不支持ogg)
audio标签也可以包含source标签;
生成audio 对象的方式:
    a) javascript 能帮助咱们去生成出 audio 对象
    b) new Audio() 等同于 html 上面 写一个 &lt;audio&gt;&lt;/audio&gt;标签
    c) chrome、欧朋浏览器;不能直接播放(需要和页面元素绑定才能播放);其余浏览器,可以直接播放

属性:
    autoplay:自动播放   duration:音频的总长度     autoplay:自动播放(谷歌和欧朋会有问题)
    currentSrc:音频地址(只读)         currentTime:设置或返回音频的长度      volume:设置音量
    loop:循环播放     src:音频的地址   controls:音频的控件    width/height: 必须在标签里面使用才生效

API:
    play():播放   pause():暂停  src:设置/返回当前音频的来源    controls:设置音频是否显示控件
    addEventListener('ended',function(){}) //监听音频播放结束事件;
    addEventListener('timeupdate',function(){}) //音频播放中事件;音频播放时触发,暂停播放不会触发
    addEventListener('seeked',function(){}) //当用户已移动/跳跃到音频的新位置
    addEventListener('seeking',function(){}) //当用户开始移动/跳跃到音频的新位置时
    addEventListener('volumechange',function(){}) //音频声音改变时触发
    addEventListener('canplay',function(){}) //音频加载完毕
    webkitRequestFullScreen():全屏(必须使用audio标签, new audio()不能使用) requestFullScreen
    load(): 重新加载音频
    muted:设置音频是否静音
    playbackRate:设置倍速
    networkState:返回音频的当前网络状态
    readyState: 属性返回音频的当前就绪状态。

                        </pre>
            <h2>meter标签</h2>
            <pre>meter: 标签定义度量衡，用于状态显示
属性：   max：规定范围的最大值。             min：规定范围的最小值。
        high：规定被界定为高的值的范围。(小于 max 属性的值,且必须大于 low 和 min属性的值)
        low：规定被界定为低的值的范围。(必须大于 min 属性的值,且必须小于 high 和 max属性的值)
        optimum：度量值的最优值。          value：规定度量的当前值

min,low,high,max四个属性会把整个部分划分为三个区间;
    1)当value和optimum值在一个区间时,例如:同时在2区间,就会出现绿色状态.
                    &lt;meter value="65" min="0" max="100" low="60" high="80" optimum="75"&gt;&lt;/meter&gt;
    2)value和optimum值在相邻区间时,例如:value在2区间,optimum在1区间,就会显示黄色状态.
                    &lt;meter value="65" min="0" max="100" low="60" high="80" optimum="40"&gt;&lt;/meter&gt;
    3)value和optimum值在相隔区间时,例如:value在1区间,optim在3区间,就会显示红色状态.
                    &lt;meter value="85" min="0" max="100" low="60" high="80" optimum="40"&gt;&lt;/meter&gt;
    4)总结:状态显示颜色与value和optimum值所在区间区间有关,所以这两个值是必不可少的
                </pre>
        </div>
        <div class="one">
            <h1 id="h5_videoJS">videoJS</h1>
            <h2>videoJS | <a href="https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html"
                             target="_blank">videoJS 参考文档</a></h2>
            <pre>
一 videoJs 使用
1、 videoJS 是一款用来做视频播放器的插件,可以播放多种格式：mp4、webm、ogg 等
2、 初始化  videoJS("example_video_1", {}, function(){ //video.js 初始化完成后执行  });
3、 video 标签的 class 中的"video-js" 是 videoJS 全屏和字幕等功能需要的基类，
    vjs-default-skin 是 videoJS 界面默认的皮肤，
    vjs-big-play-centered 是播放按钮居中,而默认的是在左上角的。

二、参数设置
1、 autoplay: 页面加载完毕后立即播放,而 IOS 设备屏蔽了这个属性
2、 preload: autoplay属性会屏蔽掉preload属性; 没有autoplay属性时,当preload=auto 时,页面加载时即加载媒体,但是苹果移动设备会忽略该属性以保护带宽,
    当preload=metadata时,只加载一些关于视频的元数据信息,如持续时间、媒体尺寸等等
3、 poster:   视频播放之前显示的图片; "xx.gif",

三、方法
    1、 play() 视频播放
    2、 pause() 视频暂停
    3、 ended() 视频播放结束
    4、 player.currentTime() player是播放器,currentTime 是获取当前的播放时间
    5、 player.duration()  视频总的时间
    6、 player.bufferedPercent() 视频缓存百分比,切记是百分比

四、插件机制
1、 声明插件函数 function Fun(option){}
2、 注册为一个插件 videoJS.plugin('Fun',Fun)
3、 使用插件
（1）动态创建的video在初始化videoJS时调用插件，即videoJS('id',{plugins:{Fun:option}})
（2）非动态创建的video初始化了的videoJS对象可以直接调用，即videoJS.Fun(option)

                    </pre>
        </div>
        <div class="one">
            <h1 id="h5_media">多媒体标签</h1>
            <pre>1)video 定义视频,比如电影片段或其他视频流;主流浏览器支持,IE8 及更早的版本不支持在开始标签和结束标签之间放置文本内容,这样就可以告知用户浏览器不支持
    autoplay 设置该属性,页面加载后就能自动播放视频文件
    controls 设置该属性,那么视频文件会有控制栏,方便用户进行暂停或者调节声音
    loop 设置该属性,当视频文件完成播放后会再次开始播放
    src 要播放视频的路径，如果引用 source标签，则该属性不用设置
    width 设置视频播放器的宽度
    height 设置视频播放器的高度
    视频格式 Ogg、MP4、webM
    demo:  &lt;video src="../video/mk（mp4）.mp4" autoplay="autoplay" controls="controls" loop="loop" width="500" height="500"&gt;
                    <span style="background: #e9394a">您的浏览器不支持播放视频文件，请更换浏览器</span>
            &lt;/video&gt;

2)audio 定义声音,比如音乐或其他音频流
    autoplay 设置该属性，页面加载后就能自动播放音频文件
    controls 设置该属性，那么音频文件会有控制栏，方便用户进行暂停或者调节声音
    loop 设置该属性，当音频文件结束时重新开始播放
    src 要播放音频的路径，如果引用source标签，则该属性不用设置
    音频格式 Mp3，ogg，wav
    demo:   &lt;audio src="../audio/mk.mp3" autoplay="autoplay" controls="controls" loop="loop" &gt;
                <span style="background: #e9394a">您的浏览器不支持播放该音频文件，请更换浏览器</span>
            &lt;/audio&gt;

3)source 媒介元素,定义媒介资源.允许规定可替换的音视频文件,供不同的浏览器去选择它适合的文件类型
    src 媒体文件的路径
    type 媒体文件的类型
    demo:   &lt;source     src=""   type="" &gt;

4)embed 定义嵌入的内容,比如插件,比如音视频. 如果嵌入音视频文件出现兼容性问题,可使用audio和video标签进行代替
    src 嵌入内容的路径
    type 嵌入内容的类型
    width 设置嵌入内容的宽度
    Height 设置嵌入内容的高度
    demo:  &lt;embed   src="" &gt;

5)canvas:定义图片
                </pre>
        </div>
        <div class="one">
            <h1 id="h5_input">h5新增input类型</h1>
            <pre class="bj">email: 用于包含 e-mail 地址的输入域;  &lt;input type=”email”&gt;
url: 用于包含 URL 地址的输入域   &lt;input type=”url”&gt;
number: 用于包含数值的输入域     请输入数字：&lt;input type="number" min="1" max="10"&gt;
range: 用于包含一定范围内数字值的输入域;    &lt;input type="range" min="1" max="10"&gt;
search: 用于搜索域    搜索：&lt;input type="search" &gt;
color: 定义拾色器,用于获取颜色     选取颜色：&lt;input type="color" &gt;
tel: 用于电话号码的文本字段
date pickers: 日期选择器，拥有多个可供选择 日期和时间的输入类型
        Datetime:选取时间、日、月、年(UTC时间)
        Datetime-local:选取时间、日、月、年(本地时间)
        &lt;input type=”date”&gt;选取年月日
        &lt;input type=”month”&gt;选取年月
        &lt;input type=”week”&gt;选取年和周
        &lt;input type=”time”&gt;选取时间（小时和分钟）
            </pre>
        </div>
        <div class="one">
            <h1 id="h5_from">h5表单新增属性</h1>
            <table class="bj2" style="font-size: 14px;line-height: 1rem" border="1">
                <tr>
                    <td>新增属性</td>
                    <td>定义</td>
                    <td>适用标签</td>
                </tr>
                <tr>
                    <td>autocomplete</td>
                    <td><pre>规定表单是否应该启用自动完成,自动完成允许浏览器预测对字段的输入,
当用户在输入字段时,浏览器基于之前输入的值,会在下面提示字段中写过的内容
                    </pre>
                    </td>
                    <td><pre>form标签;
input标签的 text、search、url、tel、email、password、datepickers、range以及 color
                    </pre>
                    </td>
                </tr>
                <tr>
                    <td>autofocus</td>
                    <td>规定当页面加载时域自动的获得焦点</td>
                    <td>input标签的所有类型</td>
                </tr>
                <tr>
                    <td>multiple</td>
                    <td>规定输入域中可选择多个文件或者输入多个值</td>
                    <td>input标签的 email 和 file 类型</td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>规定必须在提交之前填写输入域，输入域不能为空</td>
                    <td>input标签的 text、search、url、tel、email、password、datepickers、number、checkbox、radio 以及 file</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>提供一个提示，描述输入域中所期待的值</td>
                    <td>input标签的 text、search、url、tel、email、password 类型</td>
                </tr>
            </table>
        </div>
        <div class="one">
            <h1 id="h5_other">h5其他标签属性新增属性</h1>
            <pre class="bj">1)script标签
    defer:规定是否对脚本进行延迟加载  defer
    async:定义脚本是否异步执行加载    async

2)ol标签
    start: 规定有序列表的起始值   number
    reversed: 规定列表顺序为降序 reversed

3)链接属性
    link标签size属性: 规定被链接资源的尺寸
    base标签target属性: 为页面上的所有链接规定默认地址或目标
    a标签:
        media属性: 连接文档是何种媒介
        hreflang属性: 链接文档的语言
        rel属性: 当前文档与被链接文档之间的关系

4)html  manifest=“cache.manifest”（定义页面离线应用文件）
    &lt;html manifest=“cache.manifest”&gt;

5)*style scoped:内嵌CSS     &lt;style scoped&gt; …… &lt;/style&gt;



            </pre>
        </div>
    </div>
</div>
</body>
</html>